<template>
  <div class="song-rc">
    <song-header :songData="songData" />
    <allSong @updateCat="getSongData" />
  </div>
</template>

<script>
import { getSongListRecommend } from '@/api/songrc'

import songHeader from './children/songHeader'
import allSong from './children/allSong'

export default {
  name: 'SongRc',
  data() {
    return {
      songData: {}
    }
  },
  created() {
    this.getSongData()
  },
  methods: {
    async getSongData(cat) {
      const { data: res } = await getSongListRecommend(cat)
      this.songData = res.playlists[0]
    }
  },
  components: {
    songHeader,
    allSong
  }
}
</script>

  <style lang="less" scoped>
.song-rc {
  margin: 0 20px;
}
</style>